<template>
  <div>

	<myheader></myheader>

	<section class="cart text-center">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
			<div class="row">
				<div class="col-12 text-center">
					<h2 class="mt-5 mb-2">Your Shopping Cart</h2>
					<p class="mb-5"><span class="primary-color">3</span> Items in your cart</p>
					<table id="cart" class="table table-condensed" >
						<thead>
							<tr>
								<th style="width:60%">商品名称</th>
								<th style="width:12%">商品价格</th>
								<th style="width:10%">商品数量</th>
								<th style="width:16%"></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in cartlist" :key="index">
								<td data-th="Product">
									<div class="row">
										<div class="col-md-3 text-left">
											<img :src="item.pic" alt="" class="img-fluid">
										</div>
										<div class="col-md-9 text-left mt-sm-2">
											<h4>{{item.name}}</h4>
											<p>York &amp; Smith</p>
										</div>
									</div>
								</td>
								<td data-th="Price">${{item.price}}</td>
								<td data-th="Quantity">
									<input type="number" class="form-control text-center" v-model="item.num">
								</td>
								<td class="actions" data-th="">
									<div class="text-right">
										<button class="btn btn-white btn-md mb-2" @click="changenum(index,'+')"><i class="fas fa-sync" >+</i></button>

										<button class="btn btn-white btn-md mb-2" @click="changenum(index,'-')"><i class="fas fa-trash">-</i></button>
									</div>
								</td>
							</tr>
							
							
						</tbody>
					</table>
					<div class="float-right text-right">
						<h4>{{totalcount()}}</h4>
						<h1>${{totalprice()}}</h1>
						<p>(Excluding Delivery)</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
		</div>
	</section>
	
	<myfooter></myfooter>
  </div>
  
</template>


 
<script>
import myheader from './myheader'
import myfooter from './myfooter'


export default {
  	data () {
    return {
	  msg: "这是一个变量",
	  //购物车
		cartlist:[],
    }
  },
  	mounted:function(){
		//获取购物车
		this.init_cart()
   
  
},
  	methods:{
		  //删除正行逻辑
		  delete_one(index){
			this.cartlist.splice(index,1)
		  },
		  //购物车商品数量
		  changenum(index,type){
			if (type == '+') {
				this.cartlist[index].num ++;
			}else{
				if (this.cartlist[index].num > 1 ) {
					this.cartlist[index].num --;
				}else{
					this.delete_one()
				}
			}
			//状态续存
			localStorage.setItem('cart',JSON.stringify(this.cartlist));
		  },
		//计算价格
		totalprice(){
			var price = 0
			for (let index = 0; index < this.cartlist.length; index++) {
				price += (this.cartlist[index].num * this.cartlist[index].price)
			}
			return price
		},
		//计算购物车数量
		totalcount(){
			var count = 0
			for (let index = 0; index < this.cartlist.length; index++) {
				count += this.cartlist[index].num
			}
			return count
		},
		//初始化购物车
		init_cart(){
			// 初始化购物车
			if (localStorage.getItem("cart")){
				this.cartlist = JSON.parse(localStorage.getItem("cart"));
			}
			else{
				this.cartlist = []
			}
		},
},
  components:{
	"myheader":myheader,
	'myfooter':myfooter,
},
}


</script>
 
<style>



</style>